<!-- effect.html -->
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>效果示例</title>
  <script src="jquery-3.6.1.min.js"></script>
</head>

<body>
  <p>这是一个段落。</p>

  <h1>显示/隐藏</h1>
  <button onclick="$('p').show()">显示</button>
  <button onclick="$('p').hide()">隐藏</button>
  <button onclick="$('p').toggle()">隐藏/显示</button>

  <h1>淡入/淡出</h1>
  <button onclick="$('p').fadeIn()">淡入</button>
  <button onclick="$('p').fadeOut()">淡出</button>
  <button onclick="$('p').fadeToggle()">淡入/淡出</button>

  <h1>滑动方法</h1>
  <button onclick="$('p').slideDown()">向下滑动</button>
  <button onclick="$('p').slideUp()">向上滑动</button>
  <button onclick="$('p').slideToggle()">向下滑动/向上滑动</button>

  <h1>动画</h1>
  <button onclick="$('p').animate({height:'300px',opacity:'0.4'}, 'slow')">动画</button>
</body>

</html>